<template>
  <div>
    <Header
      :class="isHeaderFixed ? 'fixed-header-shadow' : 'fixed-header'"
      :isGoBack="false"
    >
      <template v-slot:left>
        <div>
          {{ checkedBookData.edition_name }}-
          {{ checkedBookData.grade_name }}
          测试报告
        </div>
      </template>
      <template v-slot:right>
        <div class="test-btn">
          <span
            class="btn-bg ml20"
            v-if="
              paperScore < 100 &&
                !$route.query.isFirst &&
                checkedBookData.book_id != 600
            "
          >
            <el-button class="button button-bg-second" @click="goCorrectWrong">
              错题订正
            </el-button>
          </span>
          <!-- <span
            class="btn-bg ml20"
            v-if="paperScore < 100 && $route.query.unitId"
          >
            <el-button class="yellow-bg" @click="goReview()">
              本单元智能复习
            </el-button>
          </span> -->
          <span class="btn-bg ml20">
            <el-button
              class="button button-border-second"
              @click="goStudyCenter"
            >
              返回学习中心
            </el-button>
          </span>
        </div>
      </template>
    </Header>
    <div
      class="test-report general-test w1200"
      :class="isHeaderFixed ? 'container-fixed' : ''"
    >
      <div class="arts-paper-container" v-if="!$route.query.isFirst">
        <div class="arts-test-container">
          <div class="arts-paper-grade">
            <!-- <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
              <div class="bg-score" v-if="showBg"></div>
              <img
                v-if="paperScore >= 0 && paperScore <= 14"
                src="@/assets/img/icon-grade1.png"
                alt=""
              />
              <img
                v-if="paperScore > 14 && paperScore <= 28"
                src="@/assets/img/icon-grade2.png"
                alt=""
              />
              <img
                v-if="paperScore > 28 && paperScore <= 42"
                src="@/assets/img/icon-grade3.png"
                alt=""
              />
              <img
                v-if="paperScore > 42 && paperScore <= 56"
                src="@/assets/img/icon-grade4.png"
                alt=""
              />
              <img
                v-if="paperScore > 56 && paperScore <= 85"
                src="@/assets/img/icon-grade5.png"
                alt=""
              />
              <img
                v-if="paperScore > 85 && paperScore <= 90"
                src="@/assets/img/icon-grade6.png"
                alt=""
              />
              <img
                v-if="paperScore > 90 && paperScore <= 100"
                src="@/assets/img/icon-grade7.png"
                alt=""
              />
            </div> -->
            <!--  v-if="paperScore >= 85 && paperScore >= maxScore" -->
            <div
              class="test-score"
              :class="
                paperScore < 85
                  ? 'score-nopass'
                  : paperScore < 99
                  ? 'score-pass'
                  : ''
              "
            >
              <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
                <div class="bg-score" v-if="showBg"></div>
                <img
                  v-if="paperScore >= 0 && paperScore <= 14"
                  src="@/assets/img/icon-grade1.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 14 && paperScore <= 28"
                  src="@/assets/img/icon-grade2.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 28 && paperScore <= 42"
                  src="@/assets/img/icon-grade3.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 42 && paperScore <= 56"
                  src="@/assets/img/icon-grade4.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 56 && paperScore <= 85"
                  src="@/assets/img/icon-grade5.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 85 && paperScore <= 90"
                  src="@/assets/img/icon-grade6.png"
                  alt=""
                />
                <img
                  v-if="paperScore > 90 && paperScore <= 100"
                  src="@/assets/img/icon-grade7.png"
                  alt=""
                />
              </div>
              <div class="test-score-title">测试成绩</div>
              <div>
                <div class="test-text">本次测试获得</div>
                <div class="test-bg-score">
                  {{ paperScore }}分
                  <div class="test-add-i" v-if="addInt">
                    <img src="@/assets/img/bg-i-success.png" alt="" />
                    <span class="add-i-number">+{{ addInt }}</span>
                  </div>
                </div>
                <div class="test-text">
                  <span v-if="paperScore >= 0 && paperScore <= 14"
                    >很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="paperScore > 14 && paperScore <= 28"
                    >很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="paperScore > 28 && paperScore <= 42"
                    >很遗憾 你仅到达了白银段位
                  </span>
                  <span v-if="paperScore > 42 && paperScore <= 56"
                    >恭喜你 你的段位在黄金段位
                  </span>
                  <span v-if="paperScore > 56 && paperScore <= 85"
                    >恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="paperScore > 85 && paperScore <= 90">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="paperScore > 90 && paperScore <= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="btn-box">
              <div>
                <el-button
                  :class="!showWrong ? 'all-btn' : 'wrong-btn'"
                  @click="showWrong = false"
                  >全部试题</el-button
                >
                <el-button
                  v-if="wrongQuestionList.length > 0"
                  :class="showWrong ? 'all-btn' : 'wrong-btn'"
                  @click="showWrong = true"
                  >只看错题</el-button
                >
              </div>
              <div>
                <span class="right-number">答对{{ rightNum }}题</span>
                <span class="wrong-number">答错{{ wrongNum }}题</span>
                <el-button @click="goTest()">重新测试</el-button>
              </div>
            </div>
            <div class="question-container">
              <div
                class="question-type-container"
                v-for="(quetionType, index) in showWrong
                  ? wrongQuestionList
                  : paperQuestionList"
                :key="quetionType.question_type"
              >
                <div class="type-title">
                  <span>{{ index + 1 }}</span>
                  {{ typeObj[quetionType.question_type] }}
                  <span
                    class="reminder-text"
                    v-if="
                      quetionType.question_type == 4 ||
                        quetionType.question_type == 5
                    "
                  >
                    (注意：单词前后输入多余的空格为错误)
                  </span>
                </div>
                <ul class="question-list">
                  <li
                    class="question"
                    :class="question.studentAnswer ? 'checked-question' : 0"
                    v-for="(question, index2) in showWrong
                      ? quetionType.wrongQuestions
                      : quetionType.question_info_list"
                    :key="question.word_id + '' + question.question_type"
                  >
                    <TestQuestion
                      :index="index2 + 1"
                      :question="question"
                    ></TestQuestion>
                  </li>
                </ul>
              </div>
              <div class="btn-box">
                <div>
                  <el-button
                    :class="!showWrong ? 'all-btn' : 'wrong-btn'"
                    @click="showWrong = false"
                    >全部试题</el-button
                  >
                  <el-button
                    v-if="wrongQuestionList.length > 0"
                    :class="showWrong ? 'all-btn' : 'wrong-btn'"
                    @click="showWrong = true"
                    >只看错题</el-button
                  >
                </div>
                <div>
                  <span class="right-number">答对{{ rightNum }}题</span>
                  <span class="wrong-number">答错{{ wrongNum }}题</span>
                  <el-button @click="goTest()">重新测试</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="arts-paper-container" v-if="$route.query.isFirst">
        <div class="arts-test-container">
          <div class="arts-paper-grade first-test">
            <div class="test-score">
              <div class="test-score-title">测试成绩</div>
              <div class="test-score-info">
                <div class="test-bg-score mr30">
                  <span>{{ paperScore }}分</span>
                  <p>本次测试得分</p>
                </div>
                <ul>
                  <li
                    v-for="questionType in paperQuestionList"
                    :key="questionType.question_type"
                  >
                    <div>
                      {{ wrongTypeNum(questionType.question_type) }}/
                      {{ questionType.question_info_list.length }}
                    </div>
                    <div class="bg-progess">
                      <div
                        class="color-progess"
                        :style="
                          `height:${(wrongTypeNum(questionType.question_type) /
                            questionType.question_info_list.length) *
                            100}%`
                        "
                      ></div>
                    </div>
                    <div>{{ typeObj[questionType.question_type] }}</div>
                  </li>
                </ul>
                <div class="test-speed ml30">
                  <div v-if="speedTest < 100 && speedTest >= 90">慢</div>
                  <div v-if="speedTest < 80 && speedTest >= 60">较慢</div>
                  <div v-if="speedTest < 60 && speedTest >= 40">中等</div>
                  <div v-if="speedTest < 40 && speedTest >= 20">较快</div>
                  <div v-if="speedTest < 20 && speedTest >= 0">快</div>
                  <div class="bg-progess">
                    <div
                      class="color-progess"
                      :style="'height:' + speedTest + 'px'"
                    ></div>
                    <ul class="postion-item">
                      <li
                        class="color-item"
                        v-for="index in 9"
                        :key="index"
                      ></li>
                    </ul>
                  </div>
                  <div>答题速度</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="fixed-footer" v-if="!$route.query.isFirst">
      <div class="btn-box w1200">
        <div>
          <el-button
            :class="!showWrong ? 'all-btn' : 'wrong-btn'"
            @click="showWrong = false"
            >全部试题</el-button
          >
          <el-button
            v-if="wrongQuestionList.length > 0"
            :class="showWrong ? 'all-btn' : 'wrong-btn'"
            @click="showWrong = true"
            >只看错题</el-button
          >
        </div>
        <div>
          <span class="right-number">答对{{ rightNum }}题</span>
          <span class="wrong-number">答错{{ wrongNum }}题</span>
          <el-button @click="goTest()">重新测试</el-button>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import TestQuestion from "../components/TestQuestion";
import Header from "@/components/Header";
export default {
  data() {
    return {
      homeworkInfo: {
        question_info_type_list: [],
      },
      isHeaderFixed: false,
      showWrong: false,
      paperQuestionList: [],
      wrongQuestionList: [],
      paperScore: 0,
      addInt: 0,
      classInfo: {},
      typeObj: {
        0: "记忆",
        1: "英译汉",
        2: "汉译英",
        3: "听力理解",
        4: "听写",
        5: "默写",
      },
      rightNum: 0,
      wrongNum: 0,
      speedTest: 0,
      checkedBookData: {},
      isBig: true,
      showBg: true,
      fromRoute: null,
    };
  },
  computed: {
    showQuestionList() {
      if (this.showWrong) {
        return this.wrongQuestionList;
      } else {
        return this.paperQuestionList;
      }
    },
  },
  components: {
    Header,
    TestQuestion,
  },
  methods: {
    wrongTypeNum(typeId) {
      let questionList = this.paperQuestionList.filter((item) => {
        return item.question_type == typeId;
      });
      return questionList[0].question_info_list.filter((question) => {
        return question.is_true == 1;
      }).length;
    },
    goReview() {
      this.$router.push({
        name: "memory",
        query: {
          unitId: this.$route.query.unitId,
          isReview: true,
        },
      });
    },
    goCorrectWrong() {
      this.$router.push({
        name: "correctWrong",
        query: this.$route.query,
      });
    },
    goTest(category) {
      let query = this.$route.query;
      if (category) {
        query.category = category;
      }
      if (this.fromRoute && this.fromRoute.name) {
        this.$router.push({
          name: this.fromRoute.name,
          query: query,
        });
        return;
      }
      this.$confirm("重新测试", "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",
        showClose: true,
        distinguishCancelAndClose: true,
        beforeClose: this.$beforeConfirmClose,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
            query: query,
          });
        })
        .catch((type) => {
          if (type != "close") {
            this.$router.push({
              name: "generalTest",
              query: query,
            });
          }
        });
    },

    goStudyCenter() {
      if (this.$route.query.backName) {
        this.$router.push({
          name: "naturalSpell",
        });
        return;
      }
      this.$router.push({
        name: "studyCenter",
      });
    },
    getHomeworkInfo() {
      let res = JSON.parse(localStorage.getItem("paperRes"));
      if (res.code == 200) {
        this.addInt = res.data.add_integral;
        res.data.question_info_type_list.forEach((questionType) => {
          questionType.question_info_list.forEach((question) => {
            question.phonetic =
              this.$store.getters.isBritish == 1
                ? question.phonetic_british
                : question.phonetic_american; //音标
            question.audioURL =
              this.$store.getters.isBritish == 1
                ? question.en_url
                : question.us_url; //音频
            question.isChecked = true;
            question.trueAnswerList = question.answer_list.filter((answer) => {
              return answer.is_true == 1;
            });
            if (question.trueAnswerList && question.trueAnswerList.length > 0) {
              if (
                question.question_type == 1 ||
                question.question_type == 2 ||
                question.question_type == 3
              ) {
                question.trueAnswer =
                  question.trueAnswerList[0].word_id ||
                  question.trueAnswerList[0].word_name ||
                  question.trueAnswerList[0].paraphrase;
              } else if (
                question.question_type == 4 ||
                question.question_type == 5
              ) {
                question.trueAnswer = question.trueAnswerList[0].word_name;
              }
            } else {
              question.trueAnswer = null;
            }
            if (
              question.student_answer_list &&
              question.student_answer_list.length > 0
            ) {
              if (
                question.question_type == 1 ||
                question.question_type == 2 ||
                question.question_type == 3
              ) {
                question.studentAnswer =
                  question.student_answer_list[0].word_id ||
                  question.student_answer_list[0].word_name ||
                  question.student_answer_list[0].paraphrase;
              } else {
                question.studentAnswer =
                  question.student_answer_list.length > 0
                    ? question.student_answer_list[0].word_name
                    : "";
              }
            } else {
              question.studentAnswer = null;
            }
          });
        });
        this.homeworkInfo = res.data;
        this.paperScore = res.data.score;
        this.speedTest = (res.data.useTime / res.data.test_time) * 100;
        this.paperQuestionList = res.data.question_info_type_list;
        this.wrongQuestionList = res.data.question_info_type_list.filter(
          (questionType) => {
            let data = questionType.question_info_list.filter((question) => {
              return question.is_true == 0;
            });
            questionType.wrongQuestions = data;
            return data.length > 0;
          }
        );
        this.paperQuestionList.forEach((item) => {
          item.question_info_list.forEach((question) => {
            if (question.is_true) {
              this.rightNum++;
            } else {
              this.wrongNum++;
            }
          });
        });
      }
    },
    scrollBehavior() {
      let dom = document.getElementById("app");
      const top = dom.pageYOffset || dom.scrollTop || dom.scrollTop;
      if (top > 0) {
        this.isHeaderFixed = true;
      } else {
        this.isHeaderFixed = false;
      }
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getHomeworkInfo();
  },
  mounted() {
    document
      .getElementById("app")
      .addEventListener("scroll", this.scrollBehavior);

    this.$nextTick(() => {
      setTimeout(() => {
        this.isBig = false;
      }, 500);
      setTimeout(() => {
        this.showBg = false;
      }, 1000);
    });
    document.getElementById("app").scrollTop = 0;
  },
  beforeRouteEnter(to, from, next) {
    // ...
    next((vm) => {
      vm.fromRoute = from;
    });
  },
  beforeDestroy() {
    document
      .getElementById("app")
      .removeEventListener("scroll", this.scrollBehavior);
  },
};
</script>
